import React from 'react';
import {connect} from 'react-redux';
import * as methods from './stors/actionCreators';

const LearnReactRedux = (props) => {
    const {inputValue, list,changeInputValue, handleAddListItem, handleDeleteListItem} = props;
    return(
        <div>
            <input value={inputValue} onChange={changeInputValue}/>
            <button onClick={handleAddListItem}>提交</button>
            <ul>
                {list.map((item,index) => {
                    return <li key={index} onClick={() => handleDeleteListItem(index)}>{item}</li>
                })}
            </ul>
        </div>
    )
};

const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        changeInputValue(e) {
            const action = methods.getInputValue(e.target.value);
            dispatch(action);
        },
        handleAddListItem() {
            const action = methods.getAddListItem();
            dispatch(action);
        },
        handleDeleteListItem(index) {
            const action = methods.deleteAddListItem(index);
            dispatch(action);
        }
    }
};

export default connect (mapStateToProps,mapDispatchToProps)(LearnReactRedux);